<template>
    <div class="banner-box" :style="{
        position: porps.position,
        top: porps.top,
        left: porps.left,
        right: porps.right,
        bottom: porps.bottom,
    }">
        <div class="banner-item" :style="{
            width: porps.width,
            height: porps.height,
            color: porps.color,
            fontSize: porps.fontSize,
            background: porps.background,
            borderRadius: porps.borderradius
        }">
            <!-- 父组件可以用插槽自定义内容样式 -->
            <slot name="bannertext"></slot>
        </div>
        <div class="triangle" :style="{
            border: porps.triangleborder,
            borderColor: porps.trianglebordercolor,
            top: porps.triangletop,
            left: porps.triangleleft,
            right: porps.triangleright,
            bottom: porps.trianglebottom,
        }"></div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const porps = defineProps(
    [
        // 横幅的属性
        // 内容
        'text',
        // 字体颜色
        'color',
        //  字体大小
        'fontSize',
        // 横幅的宽度
        'width',
        // 横幅的高度
        'height',
        // 横幅距离父元素的top距离
        'top',
        // 横幅距离父元素的left距离
        'left',
        // 横幅距离父元素的right距离
        'right',
        // 横幅距离父元素的bottom距离
        'bottom',
        // 横幅背景色
        'background',
        // 横幅的定位方式
        'position',
        // 横幅边框的圆角
        'borderradius',

        // 横幅下方箭头的属性
        // 箭头的大小 格式：8px solid
        'triangleborder',
        // 箭头的方向和颜色 需要传 四个参数 orangered transparent transparent transparent 对应的上下左右，选中其中一个方向，其他的方向设置成透明
        'trianglebordercolor',
        // 箭头距离的top距离
        'triangletop',
        // 箭头距离的right距离
        'triangleleft',
        // 箭头距离的left距离
        'triangleright',
        // 箭头距离的bottom距离
        'trianglebottom'
    ]);
</script>

<style scoped lang="scss">
.banner-box {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 666;
    animation: myBreath 3s ease-in-out infinite;

    .banner-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .triangle {
        width: 0;
        height: 0;
        position: absolute;
    }
}

@keyframes myBreath {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}
</style>